<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
    <ItemWord v-if="pageflag" class="content_lr-item" title="市场交易额" style="height: 280px">
        <div class="chart-container">
            <div class="box">
                <div class="box-info">
                    <div class="light">125个</div>
                    <div>数量</div>
                </div>
                <div class="box-info">
                    <div class="light">1266万㎡</div>
                    <div>占地面积</div>
                </div>
                <div class="box-info">
                    <div class="light">910万㎡</div>
                    <div>经营面积</div>
                </div>
                <div class="box-info">
                    <div class="light">6.2万个</div>
                    <div>商铺数量</div>
                </div>
                <div class="box-info">
                    <div class="light">4.4万户</div>
                    <div>经营户数</div>
                </div>
                <div class="box-info">
                    <div class="light">30万人</div>
                    <div>从业人员</div>
                </div>
            </div>
        </div>
    </ItemWord>
    <Reacquire v-else @onclick="getData" style="line-height: 200px">
        重新获取
    </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';

export default {
    data() {
        return {
            pageflag: true,
            timer: null,
        };
    },
    created() {
        this.getData();
    },
    mounted() { },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        getData() {
            this.pageflag = true;

            this.$nextTick(() => {
                this.init();
            });
            // this.switper();
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(
                looper,
                2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
            );
            let myChart = this.$refs.charts.chart;
            myChart.on('mouseover', (params) => {
                this.clearData();
            });
            myChart.on('mouseout', (params) => {
                this.timer = setInterval(
                    looper,
                    2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
                );
            });
        },
        init() { },
    },
};
</script>
<style lang="scss" scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: 100%;

    .box {
        position: absolute;
        top: 6px;
        left: 0px;
        width: 100%;
        height: 70px;
        z-index: 0;
        // border: 1px solid red;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .box-info {
            // border: 1px solid red;
            margin: 8px auto;
            width: 100px;

            // line-height: 38px;
            text-align: center;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            padding: 10px 10px 45px 10px;

            background: url('../../../assets/img/launch/home/llc_bg.png') no-repeat center;
            background-position: center 14px;
            background-size: 80% 90%;

            // 呼吸光效
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle,
                        rgba(255, 255, 255, 0.1),
                        transparent);
                animation: breathe 3s ease-in-out infinite;
            }

            // 缩放效果
            animation: bgScale 4s ease-in-out infinite;

            .light {
                margin-top: -10px;
                margin-bottom: 12px;
                // padding-left: 10px;
                color: #ffb507;
                font-size: 20px;
                font-weight: 600;
                // font-family: 'YouSheBiaoTiHei';
            }
        }
    }
}

@keyframes breathe {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes bgScale {

    0%,
    100% {
        background-size: 80% 90%;
        filter: brightness(0.9);
    }

    50% {
        background-size: 80% 90%;
        filter: brightness(1.1);
    }
}
</style>